<template>
  <!-- 简单导航 -->
  <SimpleNav/>
  <section class="login-form">
    <!-- 定义一个容器、水平垂直居中 -->
    <main class="login-container">
      <div class="login-bg" id="loginBg">
        <el-switch
            v-model="switchType"
            class="ml-2"
            inline-prompt
            size="large"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
            active-text="登录"
            inactive-text="注册"
        />
      </div>
      <div class="login-core">
        <div class="login-tab" @click="swtichTab">
          <span data-name="0" :class="{active: !is_staff}">普通用户</span>
          <span data-name="1" :class="{active: is_staff}">企业用户</span>
        </div>
        <!-- 显示登录组件 -->
        <div class="login-panel">
            <el-form :model="login" v-show="switchType" style="width: 100%">
              <el-form-item v-show="!is_staff">
                <el-input v-model.trim="login.email" size="large" placeholder="请输入邮箱账号">
                  <template #suffix>
                    <el-icon :size="26">
                      <Message/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item v-show="is_staff">
                <el-input v-model.trim="login.tel" size="large" placeholder="请输入手机账号">
                  <template #suffix>
                    <el-icon :size="26">
                      <PhoneFilled/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item>
                <el-input v-model.trim="login.password" type="password" size="large" placeholder="请输入密码">
                  <template #suffix>
                    <el-icon :size="26">
                      <Unlock/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-checkbox v-model="login.rememberMe" size="large">30天自动登录</el-checkbox>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="large" style="width: 100%;" @click.prevent="onSubmitLogin">登录</el-button>
              </el-form-item>
              <a class="login-fda" @click="findPass">忘记密码，点我找回</a>
            </el-form>

            <el-form :model="form" v-show="!switchType"  style="width: 100%">
              <el-form-item v-show="!is_staff">
                <el-input v-model.trim="form.email" size="large" placeholder="请输入邮箱账号">
                  <template #suffix>
                    <el-icon :size="26">
                      <Message/>
                    </el-icon>
                  </template>

                  <!--注册-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/邮箱验证-->
                  <template #append>
                    <el-button style="width: 100px;" :disabled="disabled" @click="getCode">{{ btnText }}</el-button>
                  </template>

                </el-input>
              </el-form-item>

              <el-form-item v-if="!is_staff" >
                <el-input v-model="form.code" size="large" placeholder="请输入验证码" />
              </el-form-item>

              <el-form-item v-show="is_staff">
                <el-input v-model.trim="form.tel" size="large" placeholder="请输入手机账号">
                  <template #suffix>
                    <el-icon :size="26">
                      <PhoneFilled/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model.trim="form.password" type="password" size="large" placeholder="请输入密码">
                  <template #suffix>
                    <el-icon :size="26">
                      <Unlock/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item>
                <el-input v-model.trim="form.password2" type="password" size="large" placeholder="请再次输入密码">
                  <template #suffix>
                    <el-icon :size="26">
                      <Unlock/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item>
                <el-input v-model.trim="form.name" size="large" placeholder="请输入真实姓名">
                  <template #suffix>
                    <el-icon :size="26">
                      <User/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item v-show="!is_staff">
                <el-select v-model="form.clazz" size="large" clearable placeholder="请选择班级">
				   <template v-for=" clazz in clazzList">
					   <el-option :label="clazz.name" :value="clazz.id"/>
				   </template>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" size="large" style="width: 100%;" @click.prevent="onSubmitRegister">注册</el-button>
              </el-form-item>
            </el-form>
        </div>

      </div>
    </main>
  </section>
</template>
<script>
import SimpleNav from '@/components/SimpleNav.vue'
import Name from '@/api/names.js'
import Token from '@/api/token.js'
export default {
  data() {
    return {
      disabled: false,  // 响应式数据，默认不禁用按钮
      btnText: '获取验证码',
      is_staff: true, // 控制 普通用户 / 企业用户
      switchType: true, // 控制登录或注册
      login: {
        email: '',
        password: '',
        tel: "",
        rememberMe: true,
      },
      form: {
        email: "",
        tel: "",
        code: "",
        password: "",
        password2: "",
        name: "",
        clazz: null,
      },
	  clazzList:[],// 班级列表
    };
  },
  created(){
  	  this.$api.findAvailable().then(ret=>{
  		  this.clazzList = ret;
  			  console.log(this.clazzList)
  	  })
  },
  methods: {
    getCode() {
      // 获取验证码码码码码码码码码码码-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/
      if (this.form.email === "") {
        this.$layer.msg("邮箱不允许为空");
        return false;
      }
      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.form.email)) {
        this.$layer.msg("邮箱格式不正确");
        return false;
      }
      // 发送异步请求，并设置60s倒计时
      this.disabled = true
      this.btnText = 60 ;
      let playing = setInterval(() => {
        --this.btnText;
        if (this.duration <= 0) {
          this.btnText = '获取验证码' ;
          this.disabled = false;
          clearInterval(playing);
          playing = false;
        }
      }, 1000)
      // 发送异步请求，获取该邮箱对应的验证码
    this.$api.getCodeByEmailToRegister(this.form.email).then(ret=>{
          this.$layer.msg('验证码已发送,请及时查看邮箱');
          return false;
        }).catch(error=>{
          this.$layer.msg(error.response.data.message);
          return false;
        })

    },// 我是 getCode 的结尾-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/

    swtichTab(event) {
      if (event.target.nodeName === "SPAN") {
        this.is_staff = event.target.dataset.name === "1";
      }
    },
    onSubmitLogin() {
      // 实现用户登录
	 
	 let username=null; //用于确定账户
	   if(this.is_staff){
	 	  // 企业用户
	 	  if(this.login.tel === ""){
	 		  this.$layer.msg('手机号不能为空')
	 		  return;
	 	  }
	 	  if (!/^1[3-9]\d{9}$/.test(this.login.tel)){
	 		  this.$layer.msg("手机号格式不正确")
	 		  return;
	 	  }
	 	  username=this.login.tel;
	   }else{
	 	  // 普通用户登录
	 	  if(this.login.email ===""){
	 		  this.$layer.msg("邮箱账户不能为空")
	 		  return;
	 	  }
	 	  if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.login.email)){
	 		  this.$layer.msg("邮箱账户格式不正确")
	 		  return;
	 	  }
	 		username=this.login.email
	   }
	   
	   if(this.login.password===""){
	 	  this.$layer.msg("密码不允许为空")
	 	  return;
	   }
	   
	   //调用接口,完成用户登录 登录不需要传递 记住我,只需要传递用户名和密码
		this.$api.login({username:username,password:this.login.password}).then(ret=>{
			//如果接口调用成功,登录成功,返回两个令牌
			 Token.saveToken(ret,this.login.rememberMe) //里面是两个令牌
			 
			 // 登录成功 跳转到系统首页
			 this.$router.push({name:"home"})
		 })//.catch(error=>{
		// 	if (error.response && error.response.status === 401){
		// 		this.$layer.msg(error.response.data.detail);
		// 	}
		// })
	 
	  
    },
    onSubmitRegister() {
      // 使用用户注册
	  
	  
	  let username=null; //用于确定账户
	    if(this.is_staff){
	  	  // 企业用户
		  // console.log(this.form.tel);
	  	  if(this.form.tel === ""){
			  
	  		  this.$layer.msg('手机号不能为空');
	  		  return false;
	  	  }
	  	  if (!/^1[3-9]\d{9}$/.test(this.form.tel)){
	  		  this.$layer.msg("手机号格式不正确")
	  		  return;
	  	  }
	  	  username=this.form.tel;
	    }else{
	  	  // 普通用户注册
	  	  if(this.form.email ===""){
	  		  this.$layer.msg("邮箱账户不能为空")
	  		  return;
	  	  }
	  	  if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.form.email)){
	  		  this.$layer.msg("邮箱账户格式不正确")
	  		  return;
	  	  }
	  		username=this.form.email
	    }
	    
	    if(this.form.password===""){
	  	  this.$layer.msg("密码不允许为空")
	  	  return;
	    }
	    
	    if(this.form.password !== this.form.password2){
	  	  this.$layer.msg("两次输入的密码不一致")
	  	  return;
	    }
	    
	    // 校验是否设置了真实姓名
	    if (this.form.name ===""){
	  	  this.$layer.msg("姓名不能为空")
	  	  return;
	    }
	    
	    // first_name :姓氏,last_name:名字
	    let first_name,last_name
	    for(let prefix of Name){
	  	  if(this.form.name.startsWith(prefix)){
	  		  first_name = prefix;
	  		  last_name = this.form.name.substring(prefix.length);
	  		  break;
	  	  }
	    }
	    
	    if(first_name === undefined){
	  	  first_name = this.form.name[0];
	  	  last_name = this.form.name[1];
	    }
	  
	  // 调用接口,完成用户注册
	  this.$api.register({username,password:this.form.password,first_name,last_name,clazz:this.form.clazz,is_staff:this.is_staff}).then(ret=>{
	  	// 跳转到登录页面
	  	this.switchType = true;
	  }).catch(error=>{
	  	if(error.response.status===404){
	  		this.$layer.msg(error.response.data.message);
	  		return;
	  	}
	  })
	  
    },
    findPass() {
      this.$router.push({name: 'find-pwd', query: {is_staff: this.is_staff ? btoa('enterprise') : btoa('normal')}})
    }
  },
 
  components: {
    SimpleNav,
  },
};
</script>

<style scoped>


.login-form {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}

.login-container {
  width: 900px;
  height: 560px;
  background-color: #f0f0f0;
  display: flex;
  border-radius: 20px 0 0 20px;
}

.login-bg {
  position: relative;
  width: 300px;
  background: #333 no-repeat center / 230%;
  border-radius: 20px 0 0 20px;
  box-shadow: 0 0 10px #000;
}


.login-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  animation: changeBg 15s infinite steps(1); /* steps 函数用于逐帧切换 */
}

@keyframes changeBg {
  0% { background-image: url('../assets/1.png'); }
  10% { background-image: url('../assets/2.png'); }
  20% { background-image: url('../assets/3.png'); }
  30% { background-image: url('../assets/4.png'); }
  40% { background-image: url('../assets/5.png'); }
  50% { background-image: url('../assets/6.png'); }
  60% { background-image: url('../assets/7.png'); }
  70% { background-image: url('../assets/8.png'); }
  80% { background-image: url('../assets/9.png'); }
  90% { background-image: url('../assets/10.png'); }
  100% { background-image: url('../assets/1.png'); }
}

@keyframes slideBg {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); } /* 根据图片数量调整，这里是两张图片 */
}


.login-core {
  flex: auto 1 1;
}

.login-tab {
  height: 120px;
  line-height: 120px;
  text-align: center;
  font-size: 18px;
}

.login-tab span {
  padding: 10px 30px;
  cursor: pointer;
  position: relative;
  margin: 0 5px;
}

.login-tab span::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
}

.login-tab span.active::after {
  height: 4px;
  width: 100%;
  background-color: #5FB878;
  transition: all .5s;
}

.login-panel {
  padding: 30px 40px;
}

.login-fda {
  float: right !important;
  font-size: 14px;
}

.el-switch {
  position: absolute;
  right: -22px;
  top: 10px;
}
</style>